<template>
  <div class="layer_wrap"
       :class="{ 'layer_collapse': collapse }"
  >

    <div class="layer_header" >
      <div v-if="!collapse" >图层管理</div>
      <img src="~@/static/images/11.svg"
           class="collapse_icon"
           :class="{ 'collapse': collapse }"
           @click="changeCollapse"
      />
    </div>

    <div class="layer_text" v-if="collapse" >
      图层管理
    </div>

    <div class="layer_operation" v-if="!collapse" >
      <a-tooltip>
        <template slot="title">
          下移一层
        </template>
        <div class="layer_operation_item" >
          <img src="~@/static/images/12.svg" class="opt_icon" style="transform: rotate(180deg)" />
        </div>
      </a-tooltip>

      <a-divider type="vertical" />

      <a-tooltip>
        <template slot="title">
          上移一层
        </template>
        <div class="layer_operation_item" >
          <img src="~@/static/images/12.svg" class="opt_icon" />
        </div>
      </a-tooltip>

      <a-divider type="vertical" />

      <a-tooltip>
        <template slot="title">
          移到底部
        </template>
        <div class="layer_operation_item" >
          <img src="~@/static/images/13.svg" class="opt_icon" style="transform: rotate(180deg)" />
        </div>
      </a-tooltip>


      <a-divider type="vertical" />

      <a-tooltip>
        <template slot="title">
          移到顶部
        </template>
        <div class="layer_operation_item" >
          <img src="~@/static/images/13.svg" class="opt_icon" />
        </div>
      </a-tooltip>
    </div>
    <div class="layer_list" v-if="!collapse" >
      <div class="layer_item layer_active" >
        折线图
      </div>

      <div class="layer_item" >
        区域堆积图
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      collapse: false
    }
  },
  methods: {
    changeCollapse() {
      this.collapse = !this.collapse
      this.$emit('collapse')
    }
  },
  mounted() {

  }
}
</script>
<style scoped lang="less" >
@import "index";
</style>
